<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :title="!dataForm.id ? '新增':'修改'"
               :modal="false"
               class="user-dialog add-or-updata"
               width="50%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="dataForm"
               v-loading="dataListLoading"
               :element-loading-text="$t('loading')"
               ref="dataForm"
               label-position="left"
               @keyup.enter.native="dataFormSubmitHandle()"
               label-width="120px">
        <el-form-item prop="bannerImg"
                      label="Banner设置">
          <file-upload reg=".(png|jpeg|jpg)$"
                       title="上传图片"
                       ref="fileUpload"
                       uploadType="picture-card"
                       accept=".jpeg,.jpg,.png"
                       :limit="1"
                       v-model="dataForm.imageUrl"
                       :paramData="{bucketName:'appBanner/images'}"
                       action="/springbootApi/system/oss/upload"
                       @success="successImgLoad"
                       @remove="handleImgRemove" />
        </el-form-item>
        <span class="association-profile-proposal"
              style="display:inline-block;margin-bottom: 10px"
              marl10>(建议图片尺寸...，图片大小不超过2M)</span>
        <el-form-item prop="sort"
                      label="轮播顺序">
          <!-- <el-input-number v-model.trim="dataForm.sort"
                           controls-position="right"
                           width="50"
                           :max="5"
                           :min="0"
                           class="width-100"
                           :label="$t('dataForm.sort')">
          </el-input-number> -->
          <el-input v-model.trim="dataForm.sort"
                    width="50%"
                    placeholder="请输入轮播顺序">
          </el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t('cancel')}}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="dataFormSubmitHandle('提交')">{{ $t('confirm')}}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import fileUpload from '@/components/file-upload/file-upload'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '/system/oss/delete',
        addURL: 'tb/bannerGraph/add', // 添加接口
        updateURL: 'tb/bannerGraph/revise', // 修改接口
        getDataInfoURL: 'tb/bannerGraph/conditionQuery'
      },
      visible: false,
      dataForm: {
        sort: 0,
        imageUrl: ''
      }
    }
  },
  components: {
    fileUpload
  },
  methods: {
    closeDialog () {
      this.dataForm.id = ''
      this.dataForm.imageUrl = ''
      this.dataForm.sort = 0
      this.visible = false
      this.$emit('callBack')
    },
    init (data) {
      if (data) {
        this.dataForm.id = data.id
        this.dataForm.imageUrl = data.imageUrl
        this.dataForm.sort = data.sort
      }
      this.visible = true
      this.$nextTick(() => {
        this.$refs.fileUpload.init([])
        if (this.dataForm.id) {
          let list = []
          list.push({
            name: this.dataForm.imageUrl,
            url: this.dataForm.imageUrl
          })
          this.$refs.fileUpload.init(list)
        }
      })
    },
    dataFormSubmitHandle: debounce(
      function (name) {
        this.$confirm(`确定进行[${name}]操作？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.dataForm.imageUrl === '') {
            this.$message({
              message: '请上传照片',
              type: 'warning'
            })
            return
          }
          if (this.dataForm.sort === '') {
            this.$message({
              message: '请输入轮播顺序',
              type: 'warning'
            })
            return
          }
          this.$refs.dataForm.validate((valid) => {
            if (valid) {
              const url = this.dataForm.id ? this.mixinViewModuleOptions.updateURL
                : this.mixinViewModuleOptions.addURL
              let obj = {}
              if (!this.dataForm.id) {
                obj.imageUrl = this.dataForm.imageUrl
                obj.sort = this.dataForm.sort
                this.$http.post(url, obj).then(({ data: res }) => {
                  if (res.code !== 0) {
                    return this.$message.error(res.msg)
                  }
                  this.$message.success('新增成功')
                  // this.$emit('callBack')
                  this.closeDialog()
                })
              } else {
                obj.id = this.dataForm.id
                obj.imageUrl = this.dataForm.imageUrl
                obj.sort = Number(this.dataForm.sort)
                console.log(obj)
                this.$http.put(url, obj).then(({ data: res }) => {
                  console.log(obj)
                  if (res.code !== 0) {
                    return this.$message.error(res.msg)
                  }
                  this.$message.success('保存成功')
                  // this.$emit('callBack')
                  this.closeDialog()
                })
              }
            }
          })
        })
      },
      1000,
      { leading: true, trailing: false }
    ),
    // 上传图片
    successImgLoad (name, url) {
      this.dataForm.imageUrl = url
    },
    // handleImgRemove (name, url) {
    //   console.log(this.dataForm.imageUrl)
    //   this.deleteData({
    //     url: this.mixinViewModuleOptions.deleteImgURL,
    //     paramData: { files: this.dataForm.imageUrl },
    //     isLoading: false
    //   })
    //   this.dataForm.imageUrl = ''
    // }
    handleImgRemove (url) {
      this.dataForm.imageUrl = ''
      console.log(url)
      this.deleteData({
        url: this.mixinViewModuleOptions.deleteImgURL,
        paramData: { files: url.url },
        isLoading: false
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
